<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!--Extjs version 6.2.0 -->
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="locale/locale-zh_CN.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {

            // new Ext.Panel({
            //     renderTo: Ext.getBody(),
            //     title: "第一个 ",
            //     width: 300,
            //     height: 300,
            //     html: '<h1>Hello World</h1>'
            // });
            // new Ext.TabPanel({
            //     renderTo: Ext.getBody(),
            //     width: 300,
            //     height: 200,
            //     items: [new Ext.Panel({
            //         title: "面板1",
            //         height: 30,
            //         html: "1"
            //     }), new Ext.Panel({
            //         title: "面板2",
            //         height: 30,
            //         html: "2"
            //     }), new Ext.Panel({
            //         title: "面板3",
            //         height: 30,
            //         html: "3"
            //     })]
            // });
            // new Ext.Button({
            //     renderTo: Ext.getBody(),
            //     text: "添加",
            //     pressed: true,
            //     height: 30,
            //     handler: Ext.emptyFn
            // });

            // new Ext.Viewport({
            //     layout: "border",
            //     items: [{
            //         region: "north",
            //         title: "面板",
            //         html: "面板内容",
            //         height: 300,
            //         width: 500
            //     }, {
            //         region: "center",
            //         xtype: "grid",
            //         title: "学生信息管理",
            //         autoExpandColumn: 3
            //     }]
            // });

            // new Ext.Panel({
            //     renderTo: Ext.getBody(),
            //     title: "面板头部header",
            //     width: 300,
            //     height: 200,
            //     html: '<h1>面板主区域</h1>',
            //     tbar: [{
            //         pressed: true,
            //         text: '刷新'
            //     }, ],
            //     bbar: [{
            //         text: '底部工具栏bottomToolBar'
            //     }],
            //     buttons: [{
            //         text: "按钮位于footer"
            //     }]
            // });
            //Viewport不需要指定renderTo,主要用于主界面
            // new Ext.Viewport({
            //     enableTabScroll: true,
            //     layout: "fit",
            //     items: [{
            //         title: "面板",
            //         html: "",
            //         bbar: [{
            //             text: "查找"
            //         }, {
            //             text: "删除"
            //         }]
            //     }]
            // });
            new Ext.Viewport({
                enableTabScroll: true,
                layout: "border",
                items: [{
                    title: "面板",
                    region: "north",
                    height: 50,
                    html: "<h1>网站后台管理系统</h1>"
                }, {
                    title: "菜单",
                    region: "west",
                    width: 200,
                    collapsible: true,
                    html: "菜单栏"
                }, {
                    xtype: "tabpanel",
                    region: "center",
                    items: [{
                        title: "面板1"
                    }, {
                        title: "面板2"
                    }]
                }]
            });
        }); //ready
    </script>
</head>

<body>

    <div id="grid"></div>

</body>

</html>